


<template>
  <div style="display: flex" class="menmuStyle">
    <CCard class="leftCard">
        <CCardHeader>
          <CButton
            color="info"
            @click="addSateModel"
            class="btnstyle textBtnStyle system-btn-style"
            title="添加卫星模型"
            data-permission="Btn_ALG_AddALG_wx"
          >
            <CIcon name="cil-plus" />卫星模型
          </CButton>
          <CButton
            title="排序"
            color="info"
            class="btnstyle textBtnStyle system-btn-style"
            @click="dragSortClick('tree')"
            :disabled="!disableButton"
            data-permission="Btn_ALG_Sort_wx"
            :class="{ disableTextBtn: !disableButton }"
          >
            排序
          </CButton>
          <div>
            <CButton
              horizontal
              title="添加同级"
              variant="outline"
              class="leftTextBtnStyle system-btn-style"
              @click="addTreeNode"
              data-permission="Btn_ALG_AddSC_wx"
            >
              <CIcon name="cil-plus" />同级
            </CButton>
            <CButton
              title="添加子级"
              variant="outline"
              class="leftTextBtnStyle system-btn-style"
              @click="addCatalog"
              data-permission="Btn_ALG_AddC_wx"
            >
              <CIcon name="cil-plus" />子级
            </CButton>

            <CButton
              title="编辑"
              variant="outline"
              class="leftTextBtnStyle system-btn-style"
              @click="update"
              data-permission="Btn_ALG_UpC_wx"
            >
              编辑
            </CButton>
            <CButton
              title="删除"
              variant="outline"
              class="leftTextBtnStyle system-btn-style"
              @click="delTreeNode"
              data-permission="Btn_ALG_DelC_wx"
            >
              删除
            </CButton>
          </div>
        </CCardHeader>
        <CCardBody
            class="cbodystyle"
            style="height: calc(100% - 125px) !important"
          >
        <div class="treetop">
          <Tree
            :data="treeData"
            ref="tree"
            @on-select-change="selectTree"
            class="suanfaTree"
          ></Tree>
        </div>
        </CCardBody>
      </CCard>

    <!-- 添加卫星影像模型的右侧 -->
    <CCard v-show="updateAndAdd" class="rightCard">
      <CCardHeader style="padding-top: 0">
        <div class="fanhui">
            <Icon type="ios-arrow-back" size="26" @click="goOff()" style="margin-top: 13px;margin-right:5px"/>
            <strong style="font-size: 18px;margin-top: 13px;">卫星影像管理</strong>
        </div>
        <!-- <strong style="font-size: 18px">卫星影像管理</strong> -->
        <CButton
          class="system-btn-style"
          title="保存"
          variant="outline"
          @click="save"
          data-permission="Btn_Sate_Save"
          style="float: right"
        >
          保存
        </CButton>
      </CCardHeader>
      <!-- 右侧表单 -->
      <div class="cinputtopstyle">
        <div class="basecontent">
          <CCol sm="9">
            <CInput
              label="模型名称"
              placeholder="卫星影像模型"
              :value.sync="showData.modelName"
              :title="showData.modelName"
              horizontal
              class="input" />
            <CInput
              label="卫星名称"
              placeholder="卫星"
              :value.sync="showData.satelliteName"
              :title="showData.satelliteName"
              horizontal
              class="input" />
            <CInput
              label="模型描述"
              horizontal
              :value.sync="showData.modelDesc"
              class="input" />
            <CInput
              label="影像格式"
              horizontal
              :value.sync="showData.imageFilter"
              class="input"
          /></CCol>
          <CCol sm="9">
            <CInput
              label="分辨率"
              placeholder="分辨率"
              :value.sync="showData.resolution"
              :title="showData.resolution"
              type="number"
              :step="0.00001"
              horizontal
              class="input"
            />
            <CInput
              label="全色分辨率"
              placeholder="全色分辨率"
              :value.sync="showData.panResolution"
              :title="showData.panResolution"
              type="number"
              :step="0.00001"
              horizontal
              class="input"
            />

            <CInput
              label="多光谱分辨率"
              horizontal
              :value.sync="showData.mssResolution"
              type="number"
              :step="0.00001"
              class="input"
            />
            <!-- <CSelect
              label="匹配元数据名"
              horizontal
              :value.sync="showData.metaRestrict"
              :options="metaRestrictOption"
              placeholder="请选择"
              class="input"
            /> -->
            <CInput
              label="元数据匹配符"
              horizontal
              :value.sync="showData.metaPattern"
              class="input"
              title="在${image}后追加匹配的规则,其中 ${image}*表示匹配所有"
            />
          </CCol>
        </div>
        <!-- 表单中 -->
        <div style="height: 34px">
          <div style="float: right; margin-right: 10px">
            <CButton
              color="info"
              v-c-tooltip="'卫星关联影像'"
              class="textBtnStyle system-btn-style"
              data-permission="Btn_Sate_AddR"
              @click="addImageApplyRules"
            >
              <CIcon name="cil-plus" />卫星关联影像
            </CButton>
            <CButton
              color="info"
              v-c-tooltip="'卫星匹配规则'"
              class="textBtnStyle system-btn-style"
              data-permission="Btn_Sate_AddF"
              @click="addImageMatchRules"
            >
              <CIcon name="cil-plus" />卫星匹配规则
            </CButton>

            <CButton
              color="info"
              v-c-tooltip="'四角范围'"
              class="textBtnStyle system-btn-style"
              data-permission="Btn_Sate_AddS"
              @click="addEnvelopRules"
            >
              <CIcon name="cil-plus" />四角范围
            </CButton>
          </div>
        </div>

        <div class="tableDiv">
          <div class="cinputselectstyle">
            <img
              class="imagestyle"
              src="@/assets/icons/下拉选择.png"
              alt
              @click="applyRulesTableShow = !applyRulesTableShow"
            />
            卫星关联影像
          </div>
          <Table
            v-show="applyRulesTableShow"
            stripe
            highlight-row
            ref="imageapplyRulesTable "
            :columns="getColumn"
            :data="applyRulesData"
            :span-method="handleSpan"
            border
          >
            <template slot="show_details" slot-scope="{ row, index }">
              <CButton
                type="info"
                title="编辑"
                variant="outline"
                class="textBtnStyle system-btn-style"
                data-permission="Btn_Sate_TableChange"
                @click="updateRelevated(row, index)"
              >
                编辑
              </CButton>
              <CButton
                type="info"
                title="删除"
                variant="outline"
                class="textBtnStyle system-btn-style"
                data-permission="Btn_Sate_TableDel"
                @click="delRelevated(row, index)"
              >
                删除
              </CButton>
            </template>
          </Table>
        </div>

        <div class="tableDiv">
          <div class="cinputselectstyle">
            <img
              class="imagestyle"
              src="@/assets/icons/下拉选择.png"
              alt
              @click="matchRulesTableShow = !matchRulesTableShow"
            />
            卫星匹配特征列表
          </div>
          <Table
                  v-show="matchRulesTableShow"
            stripe
            highlight-row
            ref="matchRulesTable"
            :columns="columns1"
            :data="matchRulesData"
            border
          >
            <template slot="operator" slot-scope="{ row, index }">
              <span>{{ getOperator(row.operator) }}</span>
            </template>
            <template slot="show_details" slot-scope="{ row, index }">
              <CButton
                type="info"
                title="编辑"
                variant="outline"
                class="textBtnStyle system-btn-style"
                data-permission="Btn_Sate_TableChange"
                @click="updateMatchRule(row, index)"
              >
                编辑
              </CButton>
              <CButton
                type="info"
                title="删除"
                variant="outline"
                class="textBtnStyle system-btn-style"
                data-permission="Btn_Sate_TableDel"
                @click="delMatchRule(row, index)">
                删除
              </CButton>
            </template>
          </Table>
        </div>

        <div class="tableDiv">
          <div class="cinputselectstyle">
            <img
              class="imagestyle"
              src="@/assets/icons/下拉选择.png"
              alt
              @click="coordinatorTableShow = !coordinatorTableShow"
            />
            数据四角范围
          </div>

          <Table
                  v-show="coordinatorTableShow"
            stripe
            highlight-row
            ref="matchRulesTable"
            :columns="columns2"
            :data="envelopRulesData"
            border
          >
            <template slot="show_details" slot-scope="{ row, index }">
              <CButton
                type="info"
                title="编辑"
                variant="outline"
                class="textBtnStyle system-btn-style"
                data-permission="Btn_Sate_TableChange"
                @click="updateEnvelopRule(row, index)"
              >
                编辑
              </CButton>
              <CButton
                type="info"
                title="删除"
                variant="outline"
                class="textBtnStyle system-btn-style"
                data-permission="Btn_Sate_TableDel"
                @click="deleteEnvelopRule(row, index)"
              >
                删除
              </CButton>
            </template>
          </Table>
        </div>
      </div>
    </CCard>

    <!-- 右侧卫星模型 + 表格 -->
    <CCard v-show="!updateAndAdd" class="rightCard">
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <span class="textTitle">卫星模型列表：
              <span>{{this.listName}}</span>
            </span>
          </div>
          <div class="header-right-wraper">
             <div class="search-wrapper">
               <CInput
                  placeholder="搜索..."
                  v-model="searchName"
                  class="input-search-style"
                  maxlength="50"
                  @keyup.enter="enterfaction"
              />
              <CButton
                @click="enterfaction"
                color="info"
                class="header-search system-btn-style"
              >搜索</CButton>
            </div>
            <!-- <CButton
              title="排序"
              color="info"
              class="header-main-btn system-btn-style"
              @click="dragSortClick('table')"
              :disabled="disableButton"
              :class="{ disableTextBtn: disableButton }"
              data-permission="Btn_QuaCheckFlow_Sort"
            >
              排序
            </CButton> -->
          </div>
        </CCardHeader>
        <CCardBody class="card-body">
          <div style="height: calc(100% - 45px)">
            <TableList
              ref="table"
              :getColumn="getColumns"
              :getAxios="getAxios"
            >

              <template v-slot:createTime="item">
                {{item.data.row.createTime?item.data.row.createTime.slice(0,10):""}}
              </template>
              <template v-slot:updateTime="item">
                {{item.data.row.updateTime?item.data.row.updateTime.slice(0,10):""}}
              </template>

              <template v-slot:show_details="item">
                <Poptip  trigger="hover" word-wrap width="215">
                  <CButton
                      title="编辑"
                      class="textBtnStyle onButton system-btn-style"
                      data-permission="Btn_bj_wx"
                      @click="updateRow(item.data.row)"
                  >编辑</CButton
                  >
                  <CButton
                      title="复制"
                      class="textBtnStyle onButton system-btn-style"
                      data-permission="Btn_fz_wx"
                      @click="copyRow(item.data.row)"
                  >复制</CButton
                  >
                  <CButton
                      title="删除"
                      class="textBtnStyle onButton system-btn-style"
                      data-permission="Btn_sc_wx"
                      @click="deleteRow(item.data.row)"
                  >删除</CButton
                  >
                  <div class="api" slot="content">
                    <CButton
                        title="查看"
                        class="textBtnStyle onButton system-btn-style"
                        data-permission="Btn_ck_wx"
                        @click="checkRow(item.data.row)"
                    >查看</CButton
                    >
                    <CButton
                        title="迁移"
                        class="textBtnStyle onButton system-btn-style"
                        data-permission="Btn_qy_wx"
                        @click="moveRow(item.data.row)"
                    >迁移</CButton
                    >
                  </div>
                </Poptip>
              </template>
            </TableList>
          </div>
        </CCardBody>
      </CCard>



    <!-- <Modal
      v-model="addNodeModal"
      draggable
      scrollable
      title="添加卫星模型节点"
      :style="modalStyle"
    >
      <p slot="header" class="modalHeader">添加卫星模型节点</p>
      <div class="modalBody">
        <CCol sm="9" style="margin-left: -20px">
          <CInput label="模型名称" :value.sync="newData.modelName" />
          <CInput label="卫星名称" :value.sync="newData.satelliteName" />
          <CInput label="模型描述" :value.sync="newData.modelDesc" />
          <CInput label="影像格式" :value.sync="newData.imageFilter" />
        </CCol>
      </div>

      <template #footer class="footerBtns">
        <CButton @click="addNodeModal = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addTreeNodeOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal> -->
    <Modal
      v-model="addApplyRulesModal"
      draggable
      scrollable
      title="添加卫星关联影像相关参数"
      :style="modalStyle"
    >
      <p slot="header" class="modalHeader">添加卫星关联影像相关参数</p>
      <div class="modalBody">
        <CCol sm="9" style="margin-left: -20px">
          <CSelect
            label="关联影像"
            :options="imageList"
            :value.sync="addApplyRulesData.identify"
          ></CSelect>
          <CInput label="旧值" :value.sync="addApplyRulesData.replaceMap.old" />
          <CInput
            label="替换值"
            :value.sync="addApplyRulesData.replaceMap.new"
          />
          <CInput
            label="追加规则"
            :value.sync="addApplyRulesData.appendMap['-1']"
            title="追加位置为路径最后"
          />
        </CCol>
      </div>

      <template #footer class="footerBtns">
        <CButton
          @click="addApplyRulesModal = false"
          color="info"
          class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addApplyRuleOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="addMatchRulesModal"
      draggable
      scrollable
      title="添加匹配规则"
      :style="modalStyle"
    >
      <p slot="header" class="modalHeader">添加匹配规则</p>
      <div class="modalBody">
        <CCol sm="9" style="margin-left: -20px">
          <CSelect
            label="标识"
            :options="operatorOptions"
            :value.sync="addMatchRulesData.operator"
          ></CSelect>
          <CInput label="内容" :value.sync="addMatchRulesData.content" />
          <CInput label="标识类别" :value.sync="addMatchRulesData.identify" />
          <CInput label="分隔符" :value.sync="addMatchRulesData.separator" />
          <CSelect
            label="是否约束"
            :value.sync="addMatchRulesData.restrict"
            :options="metaRestrictOption"
            placeholder="请选择"
          />

          <CInput label="开始位置" :value.sync="addMatchRulesData.startPos" />
          <CInput label="截取长度" :value.sync="addMatchRulesData.length" />
        </CCol>
      </div>

      <template #footer class="footerBtns">
        <CButton
          @click="addMatchRulesModal = false"
          color="info"
          class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addMatchRuleOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="addEnvelopRulesModal"
      draggable
      scrollable
      title="添加四点范围标识"
      :style="modalStyle"
    >
      <p slot="header" class="modalHeader">添加四点范围标识</p>
      <div class="modalBody">
        <CCol sm="9" style="margin-left: -20px">
          <CSelect
            label="分组"
            :options="envelopGropOption"
            :value.sync="addEnvelopRuleData.group"
          ></CSelect>
          <CInput label="经度" :value.sync="addEnvelopRuleData.identityY" />
          <CInput label="纬度" :value.sync="addEnvelopRuleData.identityX" />

          <CInput label="父节点" :value.sync="addEnvelopRuleData.parentNode" />
        </CCol>
      </div>

      <template #footer class="footerBtns">
        <CButton
          @click="addEnvelopRulesModal = false"
          color="info"
          class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addEnvelopRuleOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="updateRelevatedShow"
      draggable
      scrollable
      title="更新关联影像"
      :style="modalStyle"
    >
      <p slot="header" class="modalHeader">更新关联影像数据</p>
      <div class="modalBody">
        <CCol sm="9" style="margin-left: -20px">
          <CSelect
            label="关联影像"
            :options="imageList"
            :value.sync="relevantType"
            disabled
          ></CSelect>
          <CInput label="旧值" :value.sync="replaceMap.old" readonly />
          <CInput label="新值" :value.sync="replaceMap.new" />
          <CInput
            label="追加规则值"
            :value.sync="replaceMap.appendValue"
            title="追加位置为路径最后"
            placeholder="选填"
        /></CCol>
      </div>

      <template #footer class="footerBtns">
        <CButton
          color="info"
          class="cancel-btn"
          @click="updateRelevatedShow = false"
          >取消</CButton
        >
        <CButton
          color="info"
          class="system-btn-style"
          @click="updateRelevatedOk"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateMatchRuleShow"
      draggable
      scrollable
      title="更新匹配规则"
      :style="modalStyle"
    >
      <p slot="header" class="modalHeader">更新匹配规则</p>
      <div class="modalBody">
        <CCol sm="9" style="margin-left: -20px">
          <CSelect
            label="标识"
            :options="operatorOptions"
            :value.sync="updateMatchRulesData.operator"
          ></CSelect>
          <CInput label="内容" :value.sync="updateMatchRulesData.content" />
          <CInput
            label="分类标识"
            :value.sync="updateMatchRulesData.identify"
            placeholder="选填"
          />
          <CInput label="分隔符" :value.sync="updateMatchRulesData.separator" />
          <CSelect
            label="是否约束"
            :value.sync="updateMatchRulesData.restrict"
            :options="metaRestrictOption"
            placeholder="请选择"
          />

          <CInput
            label="开始位置"
            :value.sync="updateMatchRulesData.startPos"
          />
          <CInput label="截取长度" :value.sync="updateMatchRulesData.length" />
        </CCol>
      </div>

      <template #footer class="footerBtns">
        <CButton
          @click="updateMatchRuleShow = false"
          color="info"
          class="cancel-btn"
          >取消</CButton
        >
        <CButton
          @click="updateMatchRuleOk"
          color="info"
          class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="delRelevatedShow"
      draggable
      scrollable
      title="删除替换规则"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除替换规则</span>
      </p>
      <div class="modalBody">
        <p>您正在删除该替换规则记录信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton
          @click="delRelevatedShow = false"
          color="info"
          class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delRelevatedOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="delMatchRuleShow"
      draggable
      scrollable
      title="删除匹配规则"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除匹配规则</span>
      </p>
      <div class="modalBody">
        <p>您正在删除该匹配规则记录信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton
          @click="delMatchRuleShow = false"
          color="info"
          class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delMatchRuleOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <Modal
      v-model="delTreeNodeShow"
      draggable
      scrollable
      title="删除卫星影像模型"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除卫星影像模型</span>
      </p>
      <div class="modalBody">
        <p>您正在删除卫星影像模型信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton
          @click="delTreeNodeShow = false"
          color="info"
          class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delTreeNodeOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="delEnvelopShow"
      draggable
      scrollable
      title="删除四角范围"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除四角范围</span>
      </p>
      <div class="modalBody">
        <p>您正在删除删除四角范围信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delEnvelopShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delEnvelopOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!-- 添加子级 -->
    <Modal
      v-model="addShow"
      title="新建模型信息"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">添加卫星模型节点</p>
      <div class="modalBody">
        <CCol sm="9" style="margin-left: -20px">
          <CInput label="模型名称" :value.sync="addData.title" />
        </CCol>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="addCataLogCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addCataLogOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <!-- 添加同级 -->
    <Modal
      v-model="addTreeNodeShow"
      title="新建卫星模型节点"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">添加卫星模型节点</p>
      <div class="modalBody">
        <CCol sm="9" style="margin-left: -20px">
          <CInput label="模型名称" :value.sync="addData.title" />
        </CCol>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="addTreeNodeCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addTreeNodeOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!-- 编辑节点 -->
    <Modal
      v-model="updateShow"
      title="编辑卫星模型节点"
      draggable
      scrollable
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">修改卫星模型节点</p>
      <div class="modalBody">
        <CCol sm="9" style="margin-left: -20px">
          <CInput label="模型名称" :value.sync="addData.title" />
        </CCol>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateEnvelopRuleModal"
      draggable
      scrollable
      title="更新四坐标点规则"
      :style="modalStyle"
    >
      <p slot="header" class="modalHeader">更新四坐标点规则</p>
      <div class="modalBody">
        <CCol sm="9" style="margin-left: -20px">
          <CInput label="经度" :value.sync="updateEnvelopRuleData.identityY" />
          <CInput label="纬度" :value.sync="updateEnvelopRuleData.identityX" />

          <CInput
            label="父节点"
            :value.sync="updateEnvelopRuleData.parentNode"
          />
        </CCol>
      </div>

      <template #footer class="footerBtns">
        <CButton
          @click="updateEnvelopRuleModal = false"
          color="info"
          class="cancel-btn"
          >取消</CButton
        >
        <CButton
          @click="updateEnvelopRuleOk"
          color="info"
          class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!-- 查看模型信息 -->
    <Modal
      v-model="checkRowShow"
      draggable
      scrollable
      title="查看卫星模型信息"
    >
      <p slot="header" class="modalHeader">查看卫星模型信息</p>
      <div>
        <CCol sm="9">
          <CInput 
            label="模型名称" 
            :value.sync="checkRowData.modelName" 
            readonly
          />
          <CInput 
            label="卫星名称" 
            :value.sync="checkRowData.satelliteName" 
            readonly
          />
          <CInput 
            label="模型描述" 
            :value.sync="checkRowData.modelDesc" 
            readonly
          />
          <CInput 
            label="分辨率" 
            :value.sync="checkRowData.resolution" 
            readonly
          />
          <CInput 
            label="全色分辨率" 
            :value.sync="checkRowData.panResolution" 
            readonly
          />
          <CInput 
            label="多光谱分辨率" 
            :value.sync="checkRowData.mssResolution" 
            readonly
          />
        </CCol>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="checkRowShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="checkRowShow = false" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!-- 复制卫星模型 -->
    <Modal
      v-model="copyRowShow"
      draggable
      scrollable
      title="复制卫星模型"
    >
      <p slot="header" class="modalHeader">复制卫星模型</p>
      <div class="modal-row-Wraper">
        <span class="weixingName">卫星名称：</span>
        <CInput v-model="satelliteName" style="width: 240px" />
      </div>
      <div class="modal-row-Wraper">
        <span class="weixingName">模型名称：</span>
        <CInput v-model="modelName" style="width: 240px" />
      </div>
      <div class="modal-row-Wraper">
        <span class="weixingName">模型描述：</span>
        <CInput v-model="modelDesc" style="width: 240px" />
      </div>
      <template #footer class="footerBtns">
        <CButton @click="copyRowShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="copyRowOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!-- 迁移卫星模型 -->
    <Modal 
      v-model="moveRowShow" 
      draggable 
      scrollable 
      title="迁移卫星模型"
    >
      <p slot="header" class="modalHeader">迁移卫星模型</p>
      <CCardBody>
        <Tree
          :data="treeDataOfMove"
          class="scrollBar"
          ref="resTree"
          @on-select-change="moveTree"
        ></Tree>
      </CCardBody>
      <template #footer class="footerBtns">
        <CButton @click="moveRowShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="moveOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>

    <!-- 删除数据 -->
    <Modal
      v-model="deleteRowShow"
      draggable
      scrollable
      title="删除卫星模型"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span>删除卫星模型</span>
      </p>
      <div class="modalBody">
        <p>删除卫星模型时与该模型相关的信息都会丢失</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="deleteRowShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="deleteOk" color="info system-btn-style">确定</CButton>
      </template>
    </Modal>

    <!--排序弹框-->
    <sort-delog
      ref="sortDelog"
      :dragSortProp="dragSortData"
      :SortDdata.sync="sortData"
      :confirmData="confirmData"
      :sortIdFirst="sortIdBegin"
    >
    </sort-delog>
  </div>
</template>
<script>
import TableList from "@/template/table/TableList";
import sortDelog from "../../template/sortDelog/sortDelog";

export default {
  name: "satelliteImagery",
  
  components: {
    TableList,
    sortDelog
  },

  data() {
    return {

      // 排序
      sortIdBegin: [],//sortId原始顺序
      dragSortData: [], //需要排序的数据
      disableButton: true,
      currentClickItemId: "", //当前点击对象
      sortData: [], //已经拍好顺序的
      allDataList: {}, //所有的表格数据
      confirmData: {
        forName: "title",
        type: "tree",
        url: this.$api.modelApi.groupSort, //树排序
      },
      
      // 当前页 页面大小
      currentPage: 1,
      pageSize: 15,
      listName: "全部模型",

      updateAndAdd: false,//编辑  新建的切换
      addFlag: "",//新建 = 1  编辑 = 0
      saveId: "", //记录是不是有id   有id -> 编辑接口   无id -> 添加接口
      checkRowData: {},//查看具体信息

      showTips:true,
      
      addShow: false,//添加子级
      addTreeNodeShow: false,//添加同级
      delTreeNodeShow: false,//删除节点
      updateShow: false,//编辑节点
      
      addData: { //添加树节点
        title: "",
        parentId: "",
      },
      selectTreeNode: {},//选中的节点
      satelModelId: "",//树节点的id
      clickId: "",//选中的表格数据
      moveSatelModelId: "",//迁移树节点的id

      searchName: "",//按名称搜索
      modalStyle: { top: "340px" },

      checkRowShow: false,//查看
      updateRowShow: false,//编辑
      copyRowShow: false,//复制
      satelliteName: "",
      modelName: "",
      modelDesc: "",
      copyRowData: {},//复制数据的全部信息
      moveRowShow: false,//迁移
      treeDataOfMove: [],
      oldId: 0,
      deleteRowShow: false,//删除

      delEnvelopShow: false,
      applyRulesTableShow: false,
      matchRulesTableShow: false,
      coordinatorTableShow: false,

      addNodeModal: false,
      addApplyRulesModal: false,
      addMatchRulesModal: false,
      addEnvelopRulesModal: false,

      updateEnvelopRuleModal: false,
      updateEnvelopRuleData: {},

      envelopGropOption: [
        { label: "左上角", value: "topLeft" },
        { label: "右上角", value: "topRight" },
        { label: "右下角", value: "bottomRight" },
        { label: "左下角", value: "bottomLeft" },
      ],
      addEnvelopRuleData: {
        group: "topLeft",
        identityX: "",
        identityY: "",
        parentNode: "",
      },

      currentRow: {},
      tdIndex: 0, //用于标识匹配数据表格操作数据的索引
      tdIndexObj: "", //用于四至点匹配数据表格操作数据的索引
      operatorOptions: [
        { label: "且", value: "and" },
        { label: "或", value: "or" },
        { label: "非", value: "not" },
      ],
      replaceMap: { old: "", new: "", appendValue: "" },
      updateMatchRulesData: {},
      addMatchRulesData: {
        operator: "or",
        content: "",
        identify: "",
        separator: "",
        restrict: false,
        startPos: 0,
        length: "",
      },
      addApplyRulesData: {
        identify: "panOutputFiles",
        replaceMap: {
          old: "",
          new: "",
        },

        appendMap: {
          "-1": "", //key -1指的是路径最后，从最后开始追加
        },
      },
      applyRulesData: [], //应用规则表  关联影像
      matchRulesData: [], //匹配规则表
      envelopRulesData: [], //数据四角点表
      // 卫星影像列表
      getColumns: [
        {
          title: "卫星名称",
          key: "satelliteName",
        },
        {
          title: "模型名称",
          key: "modelName",
        },
        {
          title: "模型描述",
          key: "modelDesc",
          width: 180,
        },
        {
          title: "分辨率",
          key: "resolution",
          className: "centerText",
        },
        {
          title: "全色分辨率",
          key: "panResolution",
          className: "centerText",
        },
        {
          title: "多光谱分辨率",
          key: "mssResolution",
          className: "centerText",
        },
        {
          title: "创建时间",
          key: "createTime",
          slot: "createTime",
          className: "centerText",
        },
        {
          title: "修改时间",
          key: "updateTime",
          slot: "updateTime",
          className: "centerText",
        },
        {
          title: "操作",
          key: "show_details",
          slot: "show_details",
          className: "centerText",
          width: 200,
        },
      ],
      //卫星关联影像列表
      getColumn: [
        { title: "序号", type: "index", width: 80, align: "center" },
        { title: "关联影像", key: "imageName", width: "auto", align: "center" },
        { title: "原值", key: "oldValue", width: 200, align: "center" },
        { title: "替换值", key: "newValue", width: 200, align: "center" },

        {
          title: "操作",
          key: "operate",
          slot: "show_details",
          width: 200,
          align: "center",
        },
      ],
      //卫星匹配特征列表
      columns1: [
        { title: "序号", type: "index", width: 80, align: "center" },
        {
          title: "标识",
          key: "operator",
          slot: "operator",
          width: 100,
          align: "center",
        },
        { title: "内容", key: "content", width: "auto", align: "center" },
        { title: "分类标识", key: "identify", width: 100, align: "center" },
        { title: "分隔符", key: "separator", width: 100, align: "center" },
        { title: "是否约束", key: "restrict", width: 120, align: "center" },
        { title: "开始位置", key: "startPos", width: 100, align: "center" },
        { title: "截取长度", key: "length", width: 100, align: "center" },
        {
          title: "操作",
          key: "operate",
          slot: "show_details",
          width: 200,
          align: "center",
        },
      ],
      //数据四角范围列表
      columns2: [
        { title: "序号", type: "index", width: 80, align: "center" },
        { title: "名称", key: "groupAlia", width: 100, align: "center" },
        {
          title: "经度特征",
          key: "identityY",
          minWidth: 100,
          align: "center",
        },
        {
          title: "纬度特征",
          key: "identityX",
          minWidth: 100,
          align: "center",
        },

        {
          title: "父节点特征",
          key: "parentNode",
          minWidth: 100,
          align: "center",
        },
        {
          title: "操作",
          key: "operate",
          slot: "show_details",
          width: 200,
          align: "center",
        },
      ],
      getAxios: {
        url: this.$api.manageApi.getModelList, //请求路径
        method: "get", //请求方式
        dataList: { }//请求参数
      },
      
      updateRelevatedShow: false,
      delRelevatedShow: false,
      updateMatchRuleShow: false,
      delMatchRuleShow: false,
      relevantType: "panOutputFiles",
      treeData: [],
      showData: {}, //展示在卫星模型的数据
      replaceData: [],

      imageList: [
        {
          value: "panOutputFiles",
          label: "全色正射纠正影像",
        },
        {
          value: "mssOutputFiles",
          label: "多光谱正射纠正影像",
        },
        {
          value: "calibrationPans",
          label: "全色辐射定标影像",
        },
        {
          value: "calibration",
          label: "多光谱辐射定标影像",
        },

        {
          value: "geoRecs",
          label: "几何精纠正影像",
        },
        {
          value: "atmosphericCorrection",
          label: "大气校正影像",
        },
        {
          value: "fuseOutputFiles",
          label: "融合影像",
        },
        {
          value: "trueColor", //trueColors  确认
          label: "真彩色影像",
        },
        {
          value: "landsatCombine",
          label: "landsat合成影像",
        },
      ],
      metaRestrictOption: [
        { label: "是", value: true },
        { label: "否", value: false },
      ],
      newData: {
        title: "新建卫星影像模型",
        modelName: "新建卫星影像模型",
        satelliteName: "",
        modelDesc: "",
        imageFilter: "", //影像文件后缀
        resolution: 0,
        panResolution: "",
        mssResolution: "", //多光谱分辨率
        applyRules: [], //应用规则
        matchRules: [], //匹配规则
      },
    };
  },
  computed: {
  },
  watch: {
    //当前页
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getTaskTableData();
    },
    //页面大小
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getTaskTableData();
    },
    sortData(newVal) {
      let that = this;
      if (newVal.length && newVal[0] === "table") {
        that.getSateModelList(that.currentClickItemId); //保存成功后重刷表格
      }
      if (newVal.length && newVal[0] !== "table") { //分类树
        if (that.currentClickItemId) {
          let flatten = (arr) => {
            arr.forEach((item) => {
              if (item["children"] && item["children"].length) {
                flatten(item["children"]);
              }
              if (item["id"] === that.currentClickItemId) {
                item["children"] = newVal;
                return;
              }
            });
            return arr;
          };
          that.treeData = flatten(that.treeData);
        } else {
          that.treeData = newVal;
        }
      }
    },
  },
  mounted() {
    // 获取分类树
    this.getsateLliteModelTree();
  },
  methods: {
    
    //打开排序弹框
    dragSortClick(data) {
      let that = this;
      this.$refs.sortDelog.openOrClose();
      console.log(this.sortIdBegin,'kkkk');
      if (data === "tree") {
        that.confirmData = {
          forName: "title",
          type: "tree",
          url: this.$api.manageApi.modelSort,
        };
      }
    },
    
    //返回
    goOff(){
      this.updateAndAdd = false;
      this.saveId = "";
      this.getSateModelList(this.satelModelId);
    },
    
    //查询所有数据
    getTaskTableData(data = false) {
      let _this = this;
      _this.tableData = [];
      
      let param = {
        currentPageNum: data,
        pageNum: _this.currentPage,
        pageSize: _this.pageSize,
      };
      this.$refs.table.getRefreshTable(param);
    },

    //查看某模型
    checkRow(val){
      this.checkRowShow = true;
      this.checkRowData = JSON.parse(JSON.stringify(val));
    },

    //编辑某模型  -->  跳到添加卫星模型界面
    updateRow(val){
      this.updateAndAdd = true;
      this.saveId = val.id;
      this.showData = JSON.parse(JSON.stringify(val));
      //先清空三个表
      this.applyRulesData = []; //关联影像表
      this.matchRulesData = []; //匹配规则表
      this.envelopRulesData = []; //数据四角点表

      // 关联影像、匹配规则和四角范围存在的时候才调用相关函数渲染
      if(this.showData.applyRules != undefined){
        this.getApplyRulesData();
      }
      if(this.showData.matchRules){
        this.getMatchRulesData();
      }
      if(this.showData.envelopRules){
        this.getEnvelopRules();
      }
      this.addFlag = 0;//编辑
    },

    //复制
    copyRow(val){
      this.copyRowShow = true;
      this.satelliteName = val.satelliteName;
      this.modelName = val.modelName;
      this.modelDesc = val.modelDesc;
      this.copyRowData = val;
    },
    copyRowOk(){
      this.copyRowShow = false;
      let path = this.$api.manageApi.addSatelliteModel; //添加模型
      let param = this.copyRowData;
      delete param.id;//去除id，为后台生成‘
      param.satelliteName = this.satelliteName;
      param.modelName = this.modelName;
      param.modelDesc = this.modelDesc;
      if(param.satelliteName == "" || param.satelliteName == null){
        this.$Message.warning("卫星名称不能为空！");
        return;
      }
      if(param.modelName == "" || param.modelName == null){
        this.$Message.warning("模型名称不能为空！");
        return;
      }
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success("添加成功");            
          this.getSateModelList(this.satelModelId);
          }else {
            this.$Message.error(res.data.message);
          }
        });
    },
    //迁移
    moveRow(val){
      let self = this;
      self.moveRowShow = true;
      self.treeDataOfMove = self.treeData;//迁移树
      self.oldId = val.classifyId;
      self.copyRowData = val;
    },
    moveOk(){
      // if(this.moveSatelModelId == ""){
      //   this.$Message.warning("请选择要迁移的节点！");
      //   return;
      // }
      let path = this.$api.manageApi.updateSatelliteModel; //编辑
      let param = this.copyRowData;
      // delete param.id;//不能去掉id  后台通过唯一的id标识查此条数据
      param.classifyId = this.moveSatelModelId;
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success("迁移成功");
          this.getSateModelList(this.moveSatelModelId);
          this.satelModelId = this.moveSatelModelId;
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.moveRowShow = false;
    },
     // 迁移模型数据时
    moveTree(data,item){
      let node = this.$refs.tree.getSelectedNodes()[0];
      this.moveSatelModelId = node.id;
      // if(node.children == undefined){
      //   this.moveSatelModelId = node.id;
      // }else{
      //   this.$Message.warning("只能选择一个节点！不允许选择节点和节点组");
      //   this.moveSatelModelId = "";
      // }
    },

    //删除
    deleteRow(val){
      this.deleteRowShow = true;
      this.clickId = val.id;
    },
    deleteOk(){
      this.deleteRowShow = false;
      let path = this.$api.manageApi.deleteSatelliteModel + this.clickId;
      this.http.delete(path).then((res) => {
        if (res.data.success) {
          this.$Message.success("删除成功");
          this.getSateModelList(this.satelModelId);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    //添加卫星模型
    addSateModel(){
      if(!this.satelModelId){
        this.satelModelId = this.selectTreeNode.id;
      }
      if(this.satelModelId == undefined){
        this.$Message.warning("请先选择节点再添加！");
        return;
      }else{
        this.updateAndAdd = true;//切换到另一个界面
        this.addFlag = 1;//表示新建
        this.showData = {};
        this.applyRulesData = []; //关联影像表
        this.matchRulesData = []; //匹配规则表
        this.envelopRulesData = []; //数据四角点表
      }
    },
    //模糊查询
    enterfaction(){
      this.currentPage = 1;
      let path = this.$api.manageApi.getModelList;
      let param = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        modelName: this.searchName,
        classifyId: this.satelModelId,
      }

      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param,getAxiosData);
    },

    //添加子级
    addCatalog(){
      let nodeCurrentId = this.satelModelId;
      if(!nodeCurrentId){
        this.$Message.warning("请先选择一个节点！")
        return;
      }
      let nodeParentId = this.selectTreeNode.parentId;
      if(nodeParentId != 0){
        this.$Message.warning("该节点不可再添加子节点！")
        return;
      }else{
        this.addShow = true;
        this.addData = {
          title: "",
          parentId: "",
        }
      }
    },
    addCataLogOk(){
      this.addShow = false;
      this.addData.parentId = this.selectTreeNode.id;
      let path = this.$api.manageApi.addTreeNode;
      let param = {
        title: this.addData.title,
        parentId: this.addData.parentId,
      }
      this.http.post(path,param).then((res)=>{
        if(res.data.success){
          this.$Message.success(res.data.message);
          this.getsateLliteModelTree();
        }
        else{
          this.$Message.error(res.data.message);
        }
      })
    },
    addCataLogCancel(){
      this.addShow = false;
    },

    //添加同级
    addTreeNode() {
      this.addTreeNodeShow = true;
      this.addData = {
        title: "",
        parentId: "",
      }
    },
    addTreeNodeOk() {
      this.addTreeNodeShow = false;
      this.addData.parentId = this.selectTreeNode.parentId ? this.selectTreeNode.parentId : 0;//不点击节点默认添加父节点
      let path = this.$api.manageApi.addTreeNode;
      let param = {
        title: this.addData.title,
        parentId: this.addData.parentId,
      }
      this.http.post(path,param).then((res)=>{
        if(res.data.success){
          this.$Message.success(res.data.message);
          this.getsateLliteModelTree();
        }else{
          this.$Message.error(res.data.message);
        }
      })
    },
    addTreeNodeCancel(){
      this.addTreeNodeShow = false;
    },

    //编辑节点
    update(){
      this.addData.title = this.selectTreeNode.title;
      if(this.addData.title == '' || this.addData.title == null){
        this.$Message.warning("请先选择节点再进行编辑！");
      }else{
        this.updateShow = true;
      }
    },
    updateOk(){
      this.updateShow = false;
      this.clickId = this.selectTreeNode.id;//要编辑的节点的id
      this.addData.parentId = this.selectTreeNode.parentId;
      let path = this.$api.manageApi.updateTreeNode + "?id=" + this.clickId;
      let param = {
        title: this.addData.title,
        parentId: this.addData.parentId,
      }
      this.http.post(path,param).then((res)=>{
        if(res.data.success){
          this.$Message.success(res.data.message);
          this.getsateLliteModelTree();
        }else{
          this.$Message.error(res.data.message);
        }
      })
    },
    updateCancel(){
      this.updateShow = false;
    },

    //删除节点
    delTreeNode() {
      this.delTreeNodeShow = true;
    },
    delTreeNodeOk() {
      this.delTreeNodeShow = false;
      this.clickId = this.selectTreeNode.id;
      console.log(this.clickId,'/////');
      let path = this.$api.manageApi.deleteTreeNode + this.clickId;
      this.http.delete(path).then((res)=>{
        if(res.data.success){
          this.$Message.success(res.data.message);
          this.getsateLliteModelTree();
        }else{
          this.$Message.error(res.data.message);
        }
      })
      this.selectTreeNode = "";
    },
    getOperator(type) {
      let result = "";
      this.operatorOptions.forEach((ele) => {
        if (ele.value === type) result = ele.label;
      });
      return result;
    },
    //添加卫星匹配规则
    addMatchRuleOk() {
      this.addMatchRulesModal = false;
      if(this.showData.matchRules == null){
        this.showData.matchRules = [];
      }
      this.showData.matchRules.push(this.addMatchRulesData);

      this.addMatchRulesData = {
        operator: "or",
        content: "",
        identify: "",
        separator: "",
        restrict: false,
        startPos: 0,
        length: "",
      };

      this.updateData();
    },
    //添加卫星关联影像
    addApplyRuleOk() {
      this.addApplyRulesModal = false;
      let replaceMap = this.addApplyRulesData.replaceMap;
      // 重新组合下数据格式
      let old = replaceMap["old"];
      let newValue = replaceMap["new"];
      delete replaceMap["old"];
      delete replaceMap["new"];
      replaceMap[old] = newValue;
      //追加时 相同的identify的数组索引要相近
      //如果是null类型 就先置为数组形式
      if(this.showData.applyRules == null){
        this.showData.applyRules = [];
      }
      let index = this.showData.applyRules
        .map((item) => item.identify)
        .indexOf(this.addApplyRulesData.identify);
      for (let item in this.addApplyRulesData.replaceMap) {
        if (index != -1) {
          this.showData.applyRules[index].replaceMap[item] =
            this.addApplyRulesData.replaceMap[item];
          this.showData.applyRules[index].appendMap =
            this.addApplyRulesData.appendMap;
        } else {
          this.showData.applyRules.push(this.addApplyRulesData);
        }
      }

      this.addApplyRulesData = {
        identify: "panOutputFiles",
        replaceMap: {
          old: "",
          new: "",
        },

        appendMap: {
          "-1": "", //key -1指的是路径最后，从最后开始追加
        },
      };

      this.updateData();
    },
    //添加四点获取标识
    addEnvelopRuleOk() {
      this.addEnvelopRulesModal = false;
      let group = this.addEnvelopRuleData["group"];
      let tempObj = {};
      tempObj[group] = this.addEnvelopRuleData;

      if (!this.showData.envelopRules) {
        this.showData.envelopRules = tempObj;
      } else Object.assign(this.showData.envelopRules, tempObj);
      this.getEnvelopRules();
      this.updateData();
      this.addEnvelopRuleData = {
        group: "topLeft",
        identityX: "",
        identityY: "",
        parentNode: "",
      };
    },
    //编辑或者删除时整理应用规则数据格式
    getNewApplyRules(type) {
      let data = this.showData.applyRules;
      for (let i = 0; i < data.length; i++) {
        if (this.relevantType !== data[i].identify) continue;
        let replaceMap = data[i].replaceMap;
        for (let n in replaceMap) {
          if (n !== this.replaceMap.old) continue;
          if (type === "update") {
            replaceMap[n] = this.replaceMap.new;
          } else if (type === "delete") {
            delete replaceMap[n];
          }
          break;
        }
        let appendMap = data[i].appendMap;
        if (Object.keys(appendMap).length != 0) {
          data[i].appendMap["-1"] = this.replaceMap.appendValue;
        }

        let tempdata = Object.keys(data[i].replaceMap);
        if (tempdata.length == 0) {
          data.splice(i, 1);
          i--;
        }
      }
    },

    //表格操作
    //应用规则关联表格的编辑功能
    updateRelevated(item, idnex) {
      this.updateRelevatedShow = true;
      this.relevantType = item.identify;
      this.replaceMap.old = item.oldValue;
      this.replaceMap.new = item.newValue;

      this.replaceMap.appendValue = item.appendValue;
    },

    updateRelevatedOk() {
      this.updateRelevatedShow = false;
      this.getNewApplyRules("update");
      this.updateData();

      // {
      // 	"applyRules": [
      // 		{
      // 			"appendMap": {},
      // 			"identify": "",
      // 			"replaceMap": {}
      // 		}
      // 	],
      // 	"matchRules": [
      // 		{
      // 			"content": "",
      // 			"length": 0,
      // 			"operator": "",
      // 			"restrict": true,
      // 			"separator": "",
      // 			"startPos": 0
      // 		}
      // 	],
      // }
    },

    updateData() {
      if(this.addFlag == 1){    //新建卫星模型
        let path = this.$api.manageApi.updateSatelliteModel;
        let param = this.showData;
        param.classifyId = this.satelModelId;
        param.id = this.saveId;
        this.http.post(path, param).then((res) => {
          if (res.data.success) {
            this.$Message.success("添加成功");
            this.getApplyRulesData();
            this.getMatchRulesData();
            this.getEnvelopRules();
          } else {
            this.$Message.error(res.data.message);
          }
        });
      }else{    //编辑卫星模型
        let path = this.$api.manageApi.updateSatelliteModel; //编辑接口
        this.http.post(path, this.showData).then((res) => {
          if (res.data.success) {
            this.$Message.success("操作成功");
            this.getApplyRulesData();
            this.getMatchRulesData();
            this.getEnvelopRules();
          } else {
            this.$Message.error(res.data.message);
          }
        });
      }
    },
    // saveData() {
    //   let path = this.$api.manageApi.addSatelliteModel; //his.$api.manageApi.path;
    //   let param = this.showData;
    //   this.http.post(path, param).then((res) => {
    //     if (res.data.success) {
    //       this.addNodeModal = false;
    //       this.$Message.success("添加成功");
    //       this.getsateLliteModelTree();
    //       this.newData = {
    //         title: "新建卫星影像模型",
    //         modelName: "新建卫星影像模型",
    //         satelliteName: "",
    //         modelDesc: "",
    //         imageFilter: "", //影像文件后缀
    //         resolution: 0,
    //         panResolution: "",
    //         mssResolution: "", //多光谱分辨率

    //         applyRules: [], //应用规则
    //         matchRules: [], //匹配规则
    //         // envelopRules: {},//新建节点可以不需要
    //       };
    //     } else {
    //       this.$Message.error(res.data.message);
    //     }
    //   });
    // },

    //应用规则关联表格的编辑功能
    delRelevated(item, index) {
      this.delRelevatedShow = true;
      this.relevantType = item.identify;
      this.replaceMap.old = item.oldValue;
      this.replaceMap.new = item.newValue;
    },

    delRelevatedOk() {
      this.delRelevatedShow = false;
      this.getNewApplyRules("delete");
      this.updateData();
    },
    deleteEnvelopRule(item, index) {
      this.delEnvelopShow = true;
      this.currentRow = item;
    },
    delEnvelopOk() {
      this.delEnvelopShow = false;
      for (let item in this.showData.envelopRules) {
        if (item != this.currentRow.group) continue;
        delete this.showData.envelopRules[item];
        break;
      }
      this.updateData();
    },
    //匹配规则表格的编辑功能
    updateMatchRule(item, index) {
      this.updateMatchRuleShow = true;
      this.updateMatchRulesData = JSON.parse(JSON.stringify(item)); //deep copy
      this.tdIndex = index;
    },

    updateMatchRuleOk() {
      this.updateMatchRuleShow = false;
      this.showData.matchRules[this.tdIndex] = this.updateMatchRulesData;
      this.updateData();
    },

    //匹配规则表格的 删除功能
    delMatchRule(item, index) {
      this.delMatchRuleShow = true;
      this.tdIndex = index;
    },

    delMatchRuleOk() {
      this.delMatchRuleShow = false;
      this.showData.matchRules.splice(this.tdIndex, 1);
      this.updateData();
    },

    //处理合并表格   注意 合并表格时合并的行数据的索引之间要临近，不然会渲染错乱
    handleSpan({ row, column, rowIndex, columnIndex }) {
      //合并第二列,这里columnIndex==1
      if (columnIndex == 1) {
        //计算合并的行数列数
        let x = row.mergeCol == 0 ? 0 : row.mergeCol;
        let y = row.mergeCol == 0 ? 0 : 1;
        return [x, y]; //合并1行2列
      }
    },
    //合并表格处理
    assembleData(data) {
      let names = [];
      //筛选出不重复的 name值,将其放到 names数组中
      data.forEach((e) => {
        if (!names.includes(e.imageName)) {
          names.push(e.imageName);
        }
      });

      let nameNums = [];
      //将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
      names.forEach((e) => {
        nameNums.push({ name: e, num: 0 });
      });

      //计算每种 name值所在行需要合并的单元格数
      data.forEach((e) => {
        nameNums.forEach((n) => {
          if (e.imageName == n.name) {
            n.num++;
          }
        });
      });

      //将计算后的合并单元格数整合到 data中
      data.forEach((e) => {
        nameNums.forEach((n) => {
          if (e.imageName == n.name) {
            if (names.includes(e.imageName)) {
              e.mergeCol = n.num;
              //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
              names.splice(names.indexOf(n.name), 1);
            } else {
              //被合并的单元格设置为 0
              e.mergeCol = 0;
            }
          }
        });
      });

      //将整理后的数据交给表格渲染
      this.applyRulesData = data;
    },
    //添加卫星关联影像
    addImageApplyRules() {
      if(this.saveId == ""){  // 新建 + 没点保存
        this.$Message.warning("保存基本信息之后才能添加卫星关联影像！");
      }else{
        this.addApplyRulesModal = true;
      }
    },
    //添加卫星匹配规则
    addImageMatchRules() {
      if(this.saveId == ""){  // 新建 + 没点保存
        this.$Message.warning("保存基本信息之后才能添加卫星匹配规则！");
      }else{
        this.addMatchRulesModal = true;
      }
    },
    //添加四角范围的标识
    addEnvelopRules() {
      if(this.saveId == ""){  // 新建 + 没点保存
        this.$Message.warning("保存基本信息之后才能添加四角范围的标识！");
      }else{
        this.addEnvelopRulesModal = true;
      }
    },

    //获取左边分类树
    getsateLliteModelTree() {
      let self = this;
      self.treeData = [];
      let path = this.$api.manageApi.getSatelliteModel; //path;
      this.http.get(path).then((res) => {
        if (res.data.success) {
          let data = res.data.data;
          for (let i = 0; i < data.length; i++) {
            data[i].expand = false;
          }
          this.treeData = data;
          if(this.treeData.length > 0){
            this.dragSortData = res.data.data;
            this.dragSortData.forEach((item) => {
              this.sortIdBegin.push(item.sortId);
            });
          }
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    init(data) {
      let self = this;
      self.treeData = [];
      for (let i = 0; i < data.length; i++) {
        let param = data[i];
        param.title = data[i].modelName;
        param.index = i;
        param.selected = false;

        self.treeData.push(param);
      }

      self.treeData[0].selected = true;

      this.getApplyRulesData();
      this.getMatchRulesData();
      this.getEnvelopRules();
    },
    //获取树的数据
    // getTreeData() {
    //   let self = this;
    //   let path = this.$api.manageApi.getSatelliteModel; //path;
    //   this.http.get(path).then((res) => {
    //     if (res.data.success) {
    //       let data = res.data.data;
    //       self.treeData = [];
    //       for (let i = 0; i < data.length; i++) {
    //         let param = data[i];
    //         param.title = data[i].modelName;
    //         param.index = i;
    //         if (this.selectedTreeId == param.id) {
    //           param.selected = true;
    //         } else {
    //           param.selected = false;
    //         }
    //         self.treeData.push(param);
    //       }
    //     } else {
    //     }
    //   });
    // },
    //获取卫星关联影像表格应用规则数据
    getApplyRulesData() {
      let _this = this;
      _this.applyRulesData = [];
      let applyRules = _this.showData.applyRules;

      for (let i = 0; i < applyRules.length; i++) {
        let ele = applyRules[i];
        let identify = ele.identify;
        let appendMap = ele.appendMap;
        let replaceMap = ele.replaceMap;

        for (let item in replaceMap) {
          let obj = {};
          obj["identify"] = identify;
          let dd = this.imageList.filter((ele) => {
            return ele.value === identify;
          });
          obj["imageName"] = dd[0] ? dd[0].label : "";
          obj["newValue"] = replaceMap[item];
          obj["oldValue"] = item;

          if (Object.keys(appendMap).length != 0) {
            obj["appendValue"] = appendMap["-1"];
          }
          this.applyRulesData.push(obj);
        }

        let tempdata = Object.keys(replaceMap);
        if (tempdata.length == 0) {
          applyRules.splice(i, 1);
          i--;
        }
      }

      this.assembleData(this.applyRulesData);
    },

    //获取匹配规则表格数据
    getMatchRulesData() {
      let _this = this;
      _this.matchRulesData = [];
      let matchRules = _this.showData.matchRules;
      if(matchRules){
        matchRules.forEach((ele) => {
        _this.matchRulesData.push(ele);
      });
      }
      // matchRules.forEach((ele) => {
      //   _this.matchRulesData.push(ele);
      // });
    },

    getEnvelopRules() {
      let _this = this;
      _this.envelopRulesData = [];
      let envelopRules = _this.showData.envelopRules;
      for (let item in envelopRules) {
        let content = envelopRules[item];
        if (!content) continue;
        if (item === "topLeft") {
          Object.assign(content, { groupAlia: "左上角" });
        } else if (item === "topRight") {
          Object.assign(content, { groupAlia: "右上角" });
        }
        if (item === "bottomRight") {
          Object.assign(content, { groupAlia: "右下角" });
        } else if (item === "bottomLeft") {
          Object.assign(content, { groupAlia: "左下角" });
        }
        Object.assign(content, { group: item });
        _this.envelopRulesData.push(content);
      }
    },
    updateEnvelopRule(item, index) {
      this.updateEnvelopRuleModal = true;
      this.updateEnvelopRuleData = JSON.parse(JSON.stringify(item));
      this.tdIndexObj = item.group;
    },

    updateEnvelopRuleOk() {
      this.updateEnvelopRuleModal = false;
      this.showData.envelopRules[this.tdIndexObj] = this.updateEnvelopRuleData;
      this.updateData();
    },
    showApplyMatch() {
      let applyRules = this.showData.applyRules;
      applyRules.forEach((element) => {
        this.imageList.push();
      });
    },

    save() {
      // 新建模型  
      if(this.saveId == ""){
        let path = this.$api.manageApi.addSatelliteModel; //新建接口
        let param = this.showData;
        param.classifyId = this.satelModelId;
        if(param.satelliteName == "" || param.satelliteName == null){
          this.$Message.warning("卫星名称不能为空！");
          return;
        }
        if(param.modelName == "" || param.modelName == null){
          this.$Message.warning("模型名称不能为空！");
          return;
        }
        this.http.post(path, param).then((res) => {
          if (res.data.success) {
            this.$Message.success("保存成功");
            this.saveId = res.data.data.id;
          } else {
            this.$Message.error(res.data.message);
          }
          // this.updateAndAdd = false;
        });
      }else{//编辑模型
        let path = this.$api.manageApi.updateSatelliteModel; //编辑接口
        let param = this.showData;
        if(param.satelliteName == "" || param.satelliteName == null){
          this.$Message.warning("卫星名称不能为空！");
          return;
        }
        if(param.modelName == "" || param.modelName == null){
          this.$Message.warning("模型名称不能为空！");
          return;
        }
        this.http.post(path, param).then((res) => {
          // this.updateAndAdd = false;
          if (res.data.success) {
            this.$Message.success("修改成功");
            // this.getSateModelList(this.satelModelId);
          } else {
            this.$Message.error(res.data.message);
          }
        });
      }
    },
    // 树节点改变
    selectTree(data,item) {
      this.sortIdBegin = [];
      if (item.children && item.children.length) {  //有子节点
        this.dragSortData = item.children;
        this.disableButton = true;
        this.children = true;
        this.dragSortData.forEach((item) => {
          this.sortIdBegin.push(item.sortId);
        });
      } else {   //无子节点
        this.dragSortData = [];
        this.disableButton = false;
        this.children = false;
      }
      this.satelModelId = item.id;   //分类树节点id
      this.currentClickItemId = item.id; // 当前点击节点id   同上
      this.selectTreeNode = this.$refs.tree.getSelectedNodes()[0];//选中的节点
      this.listName = this.$refs.tree.getSelectedNodes()[0].title;//选中的节点名字
      this.getSateModelList(this.satelModelId);//获取对应的卫星列表

    },

  
    //获取节点对应列表
    getSateModelList(val){
      let self = this;

      let path = this.$api.manageApi.getModelList;
      let param = {
        classifyId: val,
        pageNum: self.currentPage,
        pageSize: this.pageSize,
      };

      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
    },

  },
};
</script>
<style scoped>
.tableDiv {
  border: 1px solid rgb(241, 244, 249);
  margin-left: 35px;
  margin-top: 10px;
  border-radius: 5px;
}
.form-row {
  font-weight: 1000;
}
.cardstyle {
  width: 100%;
  height: 100%;

  border: none;
  padding-top: 0px;
  padding: 0;
}
.ivu-tree {
  border-radius: 3px;
}
.btnStyle {
  margin-left: 10px;
}
.btnStyle1 {
  padding: 3px;
  margin-left: 15px;
}
.tablestyle {
  margin: 0px;
  border: 1px solid #c4c9d0;
  max-width: 100%;
}
.tablestyle > tr > td {
  width: 150px;
  height: 40px;
  text-align: center;
}

.py-2 {
  padding-top: 0.5rem !important;
}
.btn-sm,
.btn-group-sm > .btn {
  width: 45px;
  height: 33px;
}
.ivu-select {
  width: 65%;
  margin-bottom: 10px;
}

.cinputstyle {
  width: 100%;
  height: 100%;
  margin-right: 10px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.cinputselectstyle {
  height: 35px;
  margin-right: 10px;
  line-height: 35px;
  font-weight: bolder;
  background: rgb(241, 244, 249);

  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.ivu-select {
  width: 40%;
  margin-bottom: 10px;
}

.imagestyle {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

/* .treetop {
  padding: 10px;
  overflow: auto;
  height: 100%;
} */

.ivu-select {
  width: 84%;
  margin-bottom: 10px;
}

.col-md-3 {
  padding-right: 10px;
  padding-left: 20px;
}
.col-md-9 {
  padding-right: 20px;
  padding-left: 0px;
}

.col-md-10 {
  padding-left: 0px;
}

.leftTree .btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

/* iview的tree修改为ztree  start */
.treeDiv {
  height: 500px;
  width: 760px;
  overflow-y: auto;
}
/* end */
</style>

<style scoped>
/deep/.ivu-table-body {
  overflow-y: auto;
}
/deep/ .ivu-table-wrapper {
  margin-right: 10px;
}
.form-group /deep/ label {
  width: 100px;
}
.basecontent {
  display: flex;
  margin-left: 20px;
  width: 70%;
}
.form-group {
  display: flex;
}
.input {
  width: 380px;
  cursor: pointer;
  display: flex;
}

label {
  color: red !important;
}
.taskType-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}
.menmuStyle {
  height: 100%;
}
.imageControl-treeDiv {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}
.ztree {
  margin: 0;
  padding: 0;
}
.rightCard {
  width: 80%;
  margin-left: 10px;
  flex: 1;
  /* padding-left: 10px; */
}
.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}

/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

.form-row > .col,
.form-row > [class*="col-"] {
  width: 100px !important;
}

.cinputtopstyle {
  overflow-y: auto;
  box-sizing: content-box;
  height: calc(100vh - 152px);
  margin-top: 15px;
}

/*修改树上按钮*/
.leftBtn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 0;
  margin-top: 0;
  height: 60px;
  border-bottom: 1px solid #cccccc;
}
/*修改树的显示样式*/
.menmuStyle /deep/ .ivu-tree-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
/deep/.ivu-tree-arrow {
  width: 0;
}

@media (min-width: 576px) {
  /deep/.col-sm-9 {
    flex: 1 1 auto;
    max-width: 100%;
  }
}
/deep/ .ivu-tree-title{
  margin-left: 10px;
}
.tempxyz .card-body {
  height: calc(100% - 70px) !important;
}
.leftTextBtnStyle {
  /* border: none; */
  color: white;
  padding: 2px 8px;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 2px;
  border-radius: 4px;
  cursor: pointer;
}
.btnstyle {
  width: 90px !important;
  padding-top: 4px;
  height: 35px;
  margin-top: 6px;
  padding: 5px;
}
.cbodystyle {
  width: 90%;
  /* margin-top: 60px; */
  margin-bottom: 15px;
  margin-right: 15px;
  margin-left: 20px;
  overflow-y: auto;
}
/deep/.form-group[data-v-f00b0a90] label {
    width: 100px;
    line-height: 35px;
}
/deep/.rightCard .card-body{
  margin-top: 0px;
}
.leftCard {
  width: 18%;
}
.modal-row-Wraper {
  display: flex;
}
.weixingName {
  margin-left: 5px;
  margin-top: 5px;
  margin-right: 10px;
  font-size: 16px;
}
.scrollBar {
  height: 60vh;
  overflow-y: auto;
}
.fanhui{
  
  display: flex;
  height: 10px;
}
/deep/ footer.page-link:hover {
  background-color: #ffffff;
}
/deep/.header-main-btn {
  width: 80px;
  height: 40px;
  margin-left: 10px;
}
</style>